<template>
  <div class="wellrece">
    <div class="praise-movies">
      <div class="praise-title">最受好评电影</div>
      <div class="praise-movies-list">
        <div
          class="movies-list-item"
          v-for="(goodItem, index) in goodPraiseData"
          :key="index"
          @click="movieDeatil(goodItem.movieId)"
        >
          <div class="movie-cover">
            <img class="auto-img" :src="goodItem.poster" alt="" />
          </div>
          <div class="mask">
            <div class="score" v-if="goodItem.score != 0">
              观众评分 {{ goodItem.score }}
            </div>
            <div class="score" v-else-if="goodItem.score = '0'">暂无评分</div>
            <!-- <div class="expect-num" v-else-if="goodItem.wish">
            {{goodItem.wish}}人想看
            </div> -->
          </div>
          <div class="movie-name one-text">{{ goodItem.name }}</div>
        </div>
      </div>
    </div>

    <div class="movies-list">
      <div class="item" v-for="(listItem, index) in hotList" :key="index"
      @click="movieDeatil(listItem.id)">
        <div class="cover">
          <img class="auto-img" :src="listItem.img" alt="" />
        </div>
        <div class="item-box">
          <div class="item-top">
            <div class="name one-text">{{ listItem.nm }}</div>
            <!-- <div class="item-tag" v-if="listItem.version.length ? !0 : 0"> -->
            <div class="item-tag">
              <img
                class="auto-img"
                v-if="(listItem.version = 'v2d max')"
                src="../assets/movie-tag.png"
                alt=""
              />
              <img
                class="auto-img threed"
                v-else-if="(listItem.version = 'v3d')"
                src="../assets/v3d.png"
                alt=""
              />
            </div>
          </div>

          <div class="item-score" v-if="listItem.sc != 0">
            <span class="audience">观众评</span>
            <span class="score">{{ listItem.sc }}</span>
          </div>
          <div class="item-score" v-else-if="listItem.sc == '0'">
            <span class="audience">暂无评分</span>
          </div>

          <div class="actors one-text">主演:{{ listItem.star }}</div>
          <div class="desc">{{ listItem.showInfo }}</div>
        </div>
        <div class="item-right">
          <button
            class="item-button"
            v-if="listItem.preshow ? false : true"
            :style="{ backgroundColor: [listItem.showStateButton.color] }"
          >
            {{ listItem.showStateButton.content }}
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Wellrece",
  data() {
    return {
      goodPraiseData: [],
      hotList: [],
    };
  },
  created() {
    this.getHighOpinionData();
    this.getHotList();
  },
  methods: {
    // 获取好评电影数据
    getHighOpinionData() {
      this.axios({
        methods: "get",
        url: "/index/topRatedMovies",
      })
        .then((result) => {
          // 获取好评电影数据
          this.goodPraiseData = result.data.movieList;
        })
        .catch((err) => {
          
        });
    },

    // 获取热映电影数据
    getHotList() {
      this.axios({
        methods: "get",
        url: "/index/movieOnInfoList",
      })
        .then((result) => {
          this.hotList = result.data.movieList;
          // 
        })
        .catch((err) => {});
    },

  // 点击跳转到影片详情
    movieDeatil(movieId){
      // 获取点击的影片id
      
      this.$router.push({name:'MovieDetail',params:{movieId}})
    }
  },
};
</script>

<style lang="less" scoped>
.wellrece {
  margin-top: 50px;
  margin-bottom: 50px;
}
.praise-movies {
  box-sizing: border-box;
  width: 100%;
  padding: 14px 12px;

  .praise-title {
    font-size: 16px;
    color: #7b7b7b;
  }
  .praise-movies-list {
    // border: 1px solid #00f;
    margin-top: 14px;
    display: flex;
    overflow-x: auto;
    z-index: 1;

    .movies-list-item {
      // border: 1px solid #000;
      width: 85px;
      margin-right: 12px;
      flex: none;
      position: relative;
      .movie-cover {
        // width: 85px;
        height: 125px;
        img {
          height: 125px;
        }
      }
      .mask {
        // border: 1px solid #00f;
        width: 100%;
        height: 35px;
        position: absolute;
        bottom: 40px;
        left: 0;
        background-image: linear-gradient(-180deg, rgba(77, 77, 77, 0), #000);
      }
      .score,
      .expect-num {
        position: absolute;
        left: 10px;
        bottom: 3px;
        color: #faaf00;
        font-weight: bold;
        font-size: 11px;
        text-align: center;
      }
      .movie-name {
        font-size: 13px;
        color: #222;
        font-weight: bold;
        margin-top: 8px;
        margin-bottom: 20px;
      }
    }
  }
}
.movies-list {
  background-color: #f5f5f5;
  padding-top: 14px;

  .item {
    // border: 1px solid #000;
    border-bottom: 1px solid #ccc;
    padding: 12px;
    background-color: #fff;
    box-sizing: border-box;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex: none;
    .cover {
      // border: 1px solid #000;
      width: 70px;
      height: 98px;
      img {
        height: 98px;
      }
    }
    .item-box {
      width: 200px;
      .item-top {
        display: flex;
        align-items: center;
        .name {
          font-size: 17px;
          font-weight: bold;
          color: #333;
        }
        .item-tag {
          width: 43px;
          margin-left: 4px;
          .threed {
            width: 18px;
            height: 14px;
          }
        }
      }
      .item-score {
        margin-top: 8px;
        margin-bottom: 5px;
        .audience {
          font-size: 13px;
          color: #666;
        }
        .score {
          font-style: italic;
          font-size: 15px;
          color: #faaf00;
          font-weight: bolder;
          margin-left: 2px;
        }
      }
      .actors {
        font-size: 13px;
        color: #666;
      }
      .desc {
        font-size: 13px;
        color: #666;
        margin-top: 5px;
      }
    }
    .item-right {
      .item-button {
        width: 60px;
        height: 30px;
        border-radius: 14px;
        // background-color: #dd403b;
        background-color: #f03d37;
        color: #fff;
        font-size: 13px;
      }
    }
  }
}

::-webkit-scrollbar {
  display: none;
}
</style>